<!-- 用户中心 -->
<template>
	<view>
		<view class="User-top" @click="toLogin" v-if="!UserInfo.userId">
			<image src="../../static/User/default_avatar.jpg"></image>
			<text>立即登录</text>
		</view>
		<view class="User-top" v-else>
			<image :src="UserInfo.avatarUrl"></image>
			<text>{{UserInfo.nickname}}</text>
			<view>
				<text @click="tofollows">{{UserInfo.follows}} 关注</text>
				<text @click="tofolloweds">{{UserInfo.followeds}} 粉丝</text>
				<text>Lv.2</text>
			</view>
		</view>
		<view class="User-icon">
			<view class="icon-item" @click="toRecentPlays">
				<image src="../../static/User/视频 (1).png"></image>
				<text>最近播放</text>
			</view>
			<view class="icon-item" @click="tofollows">
				<image src="../../static/User/我的关注.png"></image>
				<text>我的关注</text>
			</view>
			<view class="icon-item" @click="tofolloweds">
				<image src="../../static/User/我的粉丝.png"></image>
				<text>我的粉丝</text>
			</view>
			<view class="icon-item">
				<image src="../../static/User/收藏.png"></image>
				<text>收藏和赞</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {

			};
		},
		methods: {
			// 跳转到登录页面
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},

			// 跳转到最近播放页面
			toRecentPlays() {
				uni.navigateTo({
					url: '/pages/RecentPlays/RecentPlays'
				})
			},

			// 跳转到关注页面
			tofollows() {
				uni.navigateTo({
					url: '/pages/follow/follow?type=follows'
				})
			},
			
			// 跳转到粉丝页面
			tofolloweds() {
				uni.navigateTo({
					url: '/pages/follow/follow?type=followeds'
				})
			},
		},
		onLoad() {},
		computed: {
			...mapState(['UserInfo'])
		}
	}
</script>

<style lang="scss">
	.User-top {
		background-color: #2c2c2c;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		top: 80rpx;
		height: 250rpx;
		border-radius: 20rpx;

		image {
			height: 150rpx;
			width: 150rpx;
			border-radius: 50%;
			position: absolute;
			top: -75rpx;
		}

		text {
			color: #fff;
		}

		&>text {
			font-size: 38rpx;
			margin-top: 50rpx;
		}

		&>view {
			display: flex;
			width: 50%;
			margin-top: 20rpx;
			justify-content: space-between;

			text {
				font-size: 28rpx;
			}
		}
	}

	.User-icon {
		display: flex;
		justify-content: center;
		background-color: #2c2c2c;
		position: relative;
		top: 110rpx;
		border-radius: 20rpx;
		padding: 30rpx 0;

		.icon-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 150rpx;

			image {
				height: 60rpx;
				width: 60rpx;
				padding-bottom: 10rpx;
			}

			text {
				color: #fff;
				font-size: 25rpx;
			}
		}
	}
</style>
